<template>
  <div class="hello">
    <van-nav-bar
      title="个人中心"
      right-text="编辑"
      @click-right="onClickRight"
      class="nav_bar"
    />
    <div class="a11">

      <!-- <img :src="getInfo.avaUrl" alt="" class="tp" /> -->
          <div class="tp"  >
                  <img src="../assets/1.jpg" alt=""  class="tp1" style="position:absolute;  z-index: 999" />

          </div>

      <!-- <input type="text" placeholder="请输入个性签名" /> -->


    </div>
    <div class="content">

    <van-field
      v-model="getInfo.name"
      label="姓名"
      input-align="right"
      readonly
    />
    <van-field
      v-model="getInfo.phone"
      label="手机号"
      input-align="right"
      readonly
    />
    <van-field value="郑州职业技术学院" label="学校"  input-align="right" readonly />
    <van-field value="1472241497@qq.com" label="邮箱"  input-align="right" readonly />
    <van-field value="和你在一起" label="爱好"  input-align="right" readonly />
     <van-field value="听歌 敲代码" label="兴趣爱好"  input-align="right" readonly />

    <van-field value="李志" label="喜欢的歌手"  input-align="right" readonly />
    <van-field
      v-model="getInfo.age"
      label="年龄"
      input-align="right"
      readonly
    />
    <van-field
      v-model="getInfo.gender"
      label="性别"
      input-align="right"
      readonly
    />




    <mt-button size="large" type="danger"  @click="logout()">退出登录</mt-button>
  </div>
  </div>
</template>

<script>
import url from "../tools/url";
import { Toast } from "mint-ui";
export default {
  name: "Wode",
  data: {
    return() {

    },
  },
  methods: {
    // 编辑
    onClickRight() {
      console.log(this.getInfo);
      this.$router.push({ path: "/Edit", query: { id: this.getInfo.id } });
    },
    logout() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}`;
      this.axios.post(url.LOGIN_OUT, str).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast(res.data.message);
          sessionStorage.removeItem("token");
          this.$router.push("/Login");
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
  mounted() {},
  computed: {
    getInfo() {
      return this.$store.state.info;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tp{
height: 25%;
z-index:"20%"

}
.a11{
background-color: rgb(236, 236, 232);
}
p{
  background-color: rgb(236, 236, 232);
  margin-bottom: 0px;
}
.tp1{
  margin: 50px 160px 1px;
  margin-bottom: 30px;
  width: 20%;
  border-radius: 50%;
}
.content {
  margin-top: 100px;
}




</style>
